<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="css/themes/icon.css"/>
    <link rel="stylesheet" href="css/themes/color.css"/>
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<table id="weixin_roles_tree"></table>
<script type="text/javascript">
    var $weixin_roles_tree=$('#weixin_roles_tree');
    var editbtn=$("<a href='javascript:editmenu()'>编辑</a>").linkbutton({iconCls:'icon-search',plain:true}).prop('outerHTML');
    var index=999;
    $weixin_roles_tree.treegrid({

        edititem:[],
        idField:'id',
        treeField:'text',
        fit:true,
        url:'data/menu.json',
        columns: [
            [
                {field: 'ck', checkbox: true},
                {title: '菜单名称', field: 'text', width: 150, editor: {type: 'textbox', options: {required: true}}},
                {title: '菜单图标', field: 'iconCls', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {title: '地址', field: 'url', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {field: 'state', title: '状态', editor: {type: 'checkbox', options: {on: 'true', off: 'false'}}},
                {field: 'description', title: '描述', width: 180,editor: {type: 'textbox', options: {required: true}}},
                {field: 'action', title: '是否动作', width: 80,editor: {type: 'checkbox', options: {on: 'true', off: 'false'}}},
                {title: '权限', field: 'role', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {title: '操作', field: 'btn', width: 80,formatter:function(){
                    return editbtn;
                }}
            ]
        ],
        onBeforeEdit:function(row){
            $weixin_roles_tree.treegrid('options').edititem.push(row.id);
        },

        toolbar:[
            {
                iconCls:'icon-add',
                text:'添加',
                handler:function(){
                    var node=$weixin_roles_tree.treegrid('getSelected');
                    var p={};
                    if(node){
                        console.log(node);
                        p=$weixin_roles_tree.treegrid('getParent',node.id);

                    }

                        $weixin_roles_tree.treegrid('append', {
                            parent: p.id,
                            data: [{
                                "id":index++,
                                "text": "新节点",
                                "iconCls": "icon-save",
                                "url": "e.html"
                            }]
                        });
                    console.log('父节点id:'+p.id);
                    $weixin_roles_tree.treegrid('beginEdit',index-1);
                    }
            },
            {
                iconCls:'icon-save',
                text:'接受改变',
                handler:function(){
                    var items=$weixin_roles_tree.treegrid('options').edititem;
                    $.each(items,function(i,n){
                        $weixin_roles_tree.treegrid('endEdit',n);
                    });

                }
            },
            {
                iconCls:'icon-save',
                text:'保存',
                handler:function(){
                    var rows=$weixin_roles_tree.treegrid('getChanges');

                    console.log(rows);
                }
            }
        ]
    });
    function editmenu(){
        var row=$weixin_roles_tree.treegrid('getSelected');

        $weixin_roles_tree.treegrid('beginEdit',row.id);
    }
</script>
</body>
<script type="text/javascript">
    alert("init");
</script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</html>